<template>
    <div>
        <el-form v-model="formObj" label-width="80px">
            <el-form-item label="栏目名称">
                <el-input v-model="formObj.columnName" size="medium" style="width: 20%"></el-input>
            </el-form-item>
            <el-form-item label="栏目描述">
                <el-input v-model="formObj.columnDesc"></el-input>
            </el-form-item>

            <el-form-item label="字段数量">
              <el-input v-model="formObj.val" placeholder="请输入内容字段数量" size="medium" style="width: 20%">{{formObj.val}}</el-input>
            </el-form-item>

            <el-row v-for="item in formObj.arrList" :key="item.i">
              <el-col :span="8">
                <el-form-item label="内容字段" >
                  <el-input size="medium" placeholder="请填写内容字段（英文）" v-model="item.attr">{{item.attr}}</el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="内容描述">
                  <el-input size="medium" placeholder="请填写内容字段（中文）" v-model="item.attrCn">{{item.attrCn}}</el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="内容类型">
                  <el-select placeholder="请选择内容字段类型" v-model="item.type">
                    <el-option label="字符型" value="VARCHAR"></el-option>
                    <el-option label="数字型" value="NUMBER"></el-option>
                    <el-option label="日期型" value="DATE"></el-option>
                    <el-option label="大文本" value="CLOB"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          <el-form-item>
            <el-button type="primary" @click="updateColumn">保存</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  name: 'updateColumn',
  data() {
    return {
      formObj:{"columnName":"中央远教","columnDesc":"中央远教","val":2,"arrList":[{"i":1,"attr":"pic","attrCn":"图片","type":"VARCHAR"},{"i":2,"attr":"file","attrCn":"文件","type":"VARCHAR"}]}
    };
  },
  created() {
  },
  methods: {
    updateColumn() {
      console.log(JSON.stringify(this.formObj));
      this.$http
        .put("updateColumn", {
          id: this.id,
          title: this.title,
          link: this.link,
          author: this.author,
          tag: this.tag
        })
        .then(result => {
          var result = result.body;
          if (result.code === 200) {
            alert("修改成功！");
          } else {
            // 失败了
            alert("修改失败！");
          }
        });
    }
  },
  watch:{
    val: function(val,oldVal){
          console.log(oldVal);
          if(typeof (oldVal) == "undefined" || !oldVal){
              this.formObj.arrList=[]
              console.log( "(oldVal) ==undefined")
              /* 循环构造 循环val,添加input */
              for(var i=0;i<val;i++){
                let cope = {
                    i: parseInt(i)+1,
                    attr:"",
                    attrCn:"",
                    type:""
                }
                this.formObj.arrList.push(cope);
                console.log(JSON.stringify(this.formObj.arrList))
              }
          }else{
              /* 循环构造 循环val,添加input */
              for(var i=oldVal;i<val;i++){
                let cope = {
                    i: parseInt(i)+1,
                    attr:"",
                    attrCn:"",
                    type:""
                }
                this.formObj.arrList.push(cope);
                console.log(JSON.stringify(this.formObj.arrList))
              }
          }
        }
  },
  computed: {
    val() {
      return this.formObj.val
    }
  }
};
</script>
